<template lang="html">
    <div class="row">
        <ul class="list-group col-sm-3">
            <router-link tag="li" active-class="act" :to="{path:'/com/base'}"  class="list-group-item">
                组件基本使用
            </router-link>
            <router-link tag="li" active-class="act" :to="{path:'/com/son'}"  class="list-group-item">父组件传参数给子组件</router-link>
            <router-link tag="li" active-class="act" :to="{path:'/com/toParent'}"  class="list-group-item">子组件传数据给父组件</router-link>
            <router-link tag="li" active-class="act" :to="{path:'/com/is'}"  class="list-group-item">使用is动态加载不同组件</router-link>
            <router-link tag="li" active-class="act" :to="{path:'/com/slot'}"  class="list-group-item">slot插槽功能</router-link>
            <router-link tag="li" active-class="act" :to="{path:'/com/slotName'}"  class="list-group-item">具名slot插槽功能</router-link>
            <router-link tag="li" active-class="act" :to="{path:'/com/starPage'}"  class="list-group-item">star组件开发</router-link>
        </ul>
        <div class="col-sm-8">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {}
</script>

<style lang="css">
.act{
    background:#333;
    color:#fff;
}
</style>
